<template>
  <view class="page" v-if="details">
    <image class="poster" mode="widthFix" :src="getShowImage(details.activityBackground)"></image>
    <!--		自习室排行榜-->
    <view class="study-room-rank">
      <view class="content">
        <image class="rank-icon" :src="rankIcon"></image>
        <text>排\n行\n榜</text>
      </view>
    </view>
    <!--		不需要审核展示前往打卡按钮-->
    <view class="join-activity-btn d-flex align-center justify-center" @click="goToStudyRoom" v-if="details.isAuditing === 0"
      >前往打卡</view
    >
    <!--		是否需要审核设置为需要审核展示立即预约按钮-->
    <!--		且已预约过不能再预约-->
    <view
      class="join-activity-btn d-flex align-center justify-center"
      @click="reservationActivity"
      v-else-if="details.isAuditing === 1 && (!details.reservationInfo || !details.reservationInfo.reservationId)"
      >立即预约</view
    >

    <view class="footer" v-if="details.reservationInfo && details.reservationInfo.reservationId">
      <!--		查看预约信息按钮（提交过预约时才展示）-->
      <view class="reserve-info">
        <view class="status">
          <text>预约状态：</text>
          <text class="warning" v-if="details.reservationInfo.reservationStatus === 'Booked'">已提交预约申请</text>
          <text class="success" v-else-if="details.reservationInfo.reservationStatus === 'Passed'">预约成功</text>
          <text class="danger" v-else-if="details.reservationInfo.reservationStatus === 'NotPassed'">未通过</text>
        </view>
        <view class="view-btn" @click="() => $refs['reserve-info-popup'].open()">查看更多</view>
      </view>
    </view>

    <!--		预约信息-->
    <uni-popup ref="reserve-info-popup" type="bottom">
      <view class="reserve-info-popup-content">
        <image class="close-btn" :src="closeIcon" @click="() => $refs['reserve-info-popup'].close()"></image>
        <!--				预约状态-->
        <view class="row">
          <view class="label">预约状态：</view>
          <view class="value">
            <text class="warning" v-if="details.reservationInfo.reservationStatus === 'Booked'">已提交预约申请</text>
            <text class="success" v-else-if="details.reservationInfo.reservationStatus === 'Passed'">预约成功</text>
            <text class="danger" v-else-if="details.reservationInfo.reservationStatus === 'NotPassed'">未通过</text>
          </view>
        </view>
        <!--				申请时间-->
        <view class="row">
          <view class="label">申请时间：</view>
          <view class="value">{{ details.reservationInfo.reservationTime }}</view>
        </view>
        <!--				申请不通过的原因-->
        <view class="row" v-if="details.reservationInfo.notPassedReason">
          <view class="label">不通过原因：</view>
          <view class="value">{{ details.reservationInfo.notPassedReason }}</view>
        </view>
      </view>
    </uni-popup>
    <enterToStudyRoom ref="enterToStudyRoom"></enterToStudyRoom>
  </view>
</template>

<script>
import { getShowImage, showModal } from "@/utils"
import rankIcon from "./assets/rank.svg"
import enterToStudyRoom from "@/studyRoom/components/enterToStudyRoom/index.vue"
import request from "@/utils/request"
import closeIcon from "./assets/close.svg"

export default {
  components: {
    enterToStudyRoom,
  },
  methods: {
    getShowImage,
    //活动预约
    reservationActivity() {
      request({
        url: "studyActivity/reservationActivity",
        data: {
          studyActivityId: this.details.studyActivityId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        //重新获取自习室详情更新预约信息
        this.getActivityDetails()
        showModal({
          content: "预约成功",
          showCancel: false,
        })
      })
    },
    //前往自习室学习
    goToStudyRoom() {
      this.$refs.enterToStudyRoom.enterToStudyRoom(this.details.studyRoomId)
    },
    //获取活动详情
    getActivityDetails() {
      request({
        url: "studyActivity/getActivityDetails",
        data: { studyActivityId: this.studyActivityId },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.details = data
        //动态设置页面标题
        uni.setNavigationBarTitle({
          title: data.activityName,
        })
      })
    },
  },
  data() {
    return {
      details: null,
      studyActivityId: "",
      rankIcon,
      closeIcon,
    }
  },
  onLoad(query) {
    this.studyActivityId = query.studyActivityId
    //获取自习室活动详情
    this.getActivityDetails()
  },
}
</script>

<style lang="scss" scoped>
.page {
  > .poster {
    width: 100vw;
    padding-bottom: calc(10vh + 70rpx + env(safe-area-inset-bottom));
  }

  > .study-room-rank {
    position: fixed;
    right: -6rpx;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10rpx 0 0 10rpx;
    color: rgba(255, 98, 25, 1);
    border: 6rpx solid rgba(255, 98, 25, 1);
    background: white;

    > .content {
      position: relative;
      font-size: 32rpx;
      padding: 10rpx 20rpx;

      > .rank-icon {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        top: -48rpx;
      }
    }
  }

  > .join-activity-btn {
    position: fixed;
    bottom: calc(10vh + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 332rpx;
    height: 70rpx;
    color: white;
    font-size: 32rpx;
    background: #ff6219;
    border-radius: 35rpx;
  }

  > .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.1);
    > .reserve-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: {
        left: 30rpx;
        right: 30rpx;
        bottom: calc(30rpx + env(safe-area-inset-bottom));
        top: 30rpx;
      }
      > .status {
        font-size: 32rpx;
        > .warning {
          color: var(--primary-color);
        }
        > .success {
          color: var(--success-color);
        }
        > .danger {
          color: var(--error-color);
        }
      }
      > .view-btn {
        font-size: 30rpx;
        color: white;
        background: var(--primary-color);
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
      }
    }
  }

  .reserve-info-popup-content {
    padding: 40rpx;
    border-radius: 40rpx 40rpx 0 0;
    background: white;
    position: relative;
    > .close-btn {
      position: absolute;
      right: 40rpx;
      top: 40rpx;
      width: 40rpx;
      height: 40rpx;
    }
    > .row {
      font-size: 32rpx;
			display: flex;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}

      > .label {
      }

      > .value {
        color: var(--text-color-light);
        > .warning {
          color: var(--primary-color);
        }
        > .success {
          color: var(--success-color);
        }
        > .danger {
          color: var(--error-color);
        }
      }
    }
  }
}
</style>
